<template>
  <div>
    
    <div class="staff content-top">
      <div class="list-nav">岗位配置</div>
      <div class="chart">
        <canvas class="chart-box" id="staffChart"></canvas>
      </div>
      
      <div class="list-nav">人员统计</div>
      <div class="stff-grid">
        <table border="0" cellPadding='0' cellspacing="0">
          <thead>
            <tr>
              <th rowspan="2">岗位</th>
              <th colspan="2">早班</th>
              <th colspan="2">中班</th>
              <th colspan="2">晚班</th>
            </tr>
            <tr>
              <th>人数</th>
              <th>当班</th>
              <th>人数</th>
              <th>当班</th>
              <th>人数</th>
              <th>当班</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>班长</td>
              <td>1</td>
              <td>1</td>
              <td>1</td>
              <td>1</td>
              <td>1</td>
              <td>1</td>
            </tr>
            <tr>
              <td>副班长</td>
              <td>1</td>
              <td>1</td>
              <td>1</td>
              <td>1</td>
              <td>1</td>
              <td>1</td>
            </tr>
            <tr>
              <td>带班长</td>
              <td>3</td>
              <td>3</td>
              <td>3</td>
              <td>3</td>
              <td>3</td>
              <td>3</td>
            </tr>
            <tr>
              <td>自动线</td>
              <td>1</td>
              <td>1</td>
              <td>1</td>
              <td>1</td>
              <td>1</td>
              <td>1</td>
            </tr>
            <tr>
              <td>手动线</td>
              <td>3</td>
              <td>3</td>
              <td>3</td>
              <td>3</td>
              <td>3</td>
              <td>3</td>
            </tr>
            <tr>
              <td>去毛刺</td>
              <td>10</td>
              <td>10</td>
              <td>10</td>
              <td>10</td>
              <td>10</td>
              <td>10</td>
            </tr>
            <tr>
              <td>检验</td>
              <td>2</td>
              <td>2</td>
              <td>2</td>
              <td>2</td>
              <td>2</td>
              <td>2</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  // 引入 ECharts 主模块
  var echarts = require('echarts');
  import NavBar from '../../components/NavBar.vue'
  export default {
    name: 'staff',
    components:{
      NavBar
    },
    data() {
      return {
        staffChartData: [
          {name: '标配',role: '班长',quantity: 1},
          {name: '标配',role: '副班长', quantity: 1},
          {name: '标配',role: '带班长', quantity: 3},
          {name: '标配',role: '自动线',quantity: 3},
          {name: '标配',role: '手动线',quantity: 12},
          {name: '标配',role: '去毛刺',quantity: 24},
          {name: '标配',role: '检验',quantity: 3},

          {name: '实际',role: '班长',quantity: 1},
          {name: '实际',role: '副班长',quantity: 1},
          {name: '实际',role: '带班长',quantity: 3},
          {name: '实际',role: '自动线',quantity: 3},
          {name: '实际',role: '手动线',quantity: 12},
          {name: '实际',role: '去毛刺',quantity: 24},
          {name: '实际',role: '检验',quantity: 3},
        ]

      }
    },
    methods: {
      drawChart() {


        var chartDom = document.getElementById('staffChart');
        var myChart = echarts.init(chartDom, null, {
        	devicePixelRatio: window.devicePixelRatio
        });

        var option = {
          dataset: {
            source: [
              ["type", "班长", "副班长", "带班长", "自动线", "手动线", "去毛刺", "检验"],
              ["Forest", 1, 1, 3, 1, 3, 10, 2],
              ["Steppe", 1, 1, 3, 1, 3, 10, 2]
            ]
          },
          grid: {
            top:40,
          	left: '2%',
          	right: '2%',
          	bottom: '2%',
          	containLabel: true
          },

          legend: {
            top:"7",
            itemWidth: 17,
            itemHeight:9,
            data: ['计划', '实际'],
            textStyle: {
              fontSize: 7
            }
          },
          xAxis: [
            {
              type: 'category',
              axisLabel: {
                fontSize: 7
              }
            },

          ],
          yAxis: [
            {
              type: 'value',
              name: '',
              // min: 0,
              // max: 250,
              // interval: 50,
              axisLabel: {
                  formatter: '{value}',
                  fontSize: 8
              }
            }
          ],
          series: [
            {
              name: '计划',
              type: 'bar',
              seriesLayoutBy: "row",
              label: {
                show: true,
                position:"top",
                color:'#555555',
                fontSize:8
              },
              itemStyle: {
                color: "#066EF4"
              }
            },
            {
              name: '实际',
              type: 'bar',
              seriesLayoutBy: "row",
              label: {
                show: true,
                position:"top",
                color:'#555555',
                fontSize:8
              },
              itemStyle: {
                color: "#4cabce"
              }
            }
          ]
        };
        myChart.setOption(option);

      },

    },
    mounted() {
      this.$nextTick(() => {
        this.drawChart();
      });
      
    }

  }
</script>

<style scoped lang="less">
  table {
    width: 100%;
    border-right:1px solid #7f7f7f;
    border-bottom:1px solid #7f7f7f
  }
  table tr th{
    font-weight: 300;
    padding: 6px;
    font-size: 15px;
    color: #646566;
    border-left:1px solid #7f7f7f;
    border-top:1px solid #7f7f7f
  }
  table tr td{
    padding: 5px;
    text-align: center;
    font-size: 0.373333rem;
    color: #646566;
    border-left:1px solid #7f7f7f;
    border-top:1px solid #7f7f7f
  }
  .staff-nav{
    height: 1.2266rem;
    background-color: #f2f2f2;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    font-size: 0.4266rem;
    line-height: 1.2266rem;
    text-align: center;
  }
  .staff{
    margin-bottom: 50px;
    .list-nav{
      font-size: 0.4rem;
      height: 1.22rem;
      line-height: 1.22rem;
      text-align: center;
      background-color: #066EF4;
      color: #fff;
    }
  }
  .chart{
    .chart-box{
      width: 100% !important;
      height: 6.5333rem !important;
    }
  }
</style>
